<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下载服务日志</title>
    <link rel="stylesheet" href="/css/index.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
</head>

<body>
    <div id="app">
        <header class="app-header">
            <h1>下载服务日志</h1>
        </header>

        <main class="container">
            <section class="panel">
                <div class="filters">
                    <label>
                        任务ID：
                        <input v-model.trim="query.jobId" placeholder="输入下载任务ID" />
                    </label>
                    <label>
                        状态：
                        <select v-model="query.status">
                            <option value="">全部</option>
                            <option value="PENDING">PENDING</option>
                            <option value="RUNNING">RUNNING</option>
                            <option value="SUCCESS">SUCCESS</option>
                            <option value="FAILED">FAILED</option>
                        </select>
                    </label>
                    <button @click="refreshAll" :disabled="loading">刷新</button>
                    <label class="auto-refresh">
                        <input type="checkbox" v-model="autoRefresh.enabled" /> 自动刷新
                        <select v-model.number="autoRefresh.intervalMs" :disabled="!autoRefresh.enabled">
                            <option :value="1000">1s</option>
                            <option :value="2000">2s</option>
                            <option :value="5000">5s</option>
                            <option :value="10000">10s</option>
                        </select>
                    </label>
                </div>
            </section>

            <section class="panel">
                <h2>任务列表</h2>
                <div class="table-wrap">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>文件名</th>
                                <th>状态</th>
                                <th>进度</th>
                                <th>速度</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="item in downloads" :key="item.id"
                                :class="['status-' + (item.status || '').toLowerCase()]">
                                <td class="mono">{{ item.id }}</td>
                                <td :title="item.file_name">{{ item.file_name }}</td>
                                <td>{{ item.status }}</td>
                                <td>{{ formatPercent(item.percent) }}</td>
                                <td>{{ formatSpeed(item.speed_bps) }}</td>
                                <td>{{ item.created_at }}</td>
                                <td>
                                    <button @click="selectJob(item.id)">查看日志</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="pagination">
                    <button @click="pageDown" :disabled="page.offset === 0">上一页</button>
                    <span>第 {{ page.pageNumber }} 页</span>
                    <button @click="pageUp" :disabled="downloads.length < page.limit">下一页</button>
                </div>
            </section>

            <section class="panel" v-if="currentJob">
                <h2>日志 - {{ currentJob }}</h2>
                <div class="logs">
                    <div class="log-row" v-for="log in logs" :key="log.id">
                        <span class="log-time">{{ log.created_at }}</span>
                        <span class="log-level" :class="'lvl-' + log.level.toLowerCase()">{{ log.level }}</span>
                        <span class="log-message">{{ log.message }}</span>
                        <span class="log-meta" v-if="log.meta">{{ log.meta }}</span>
                    </div>
                </div>
                <div class="pagination">
                    <button @click="logsPageDown" :disabled="logsPage.offset === 0">上一页</button>
                    <span>第 {{ logsPage.pageNumber }} 页</span>
                    <button @click="logsPageUp" :disabled="logs.length < logsPage.limit">下一页</button>
                </div>
            </section>
        </main>
    </div>

    <script src="/js/index.js"></script>
</body>

</html>